<template>
    <div>
        <el-container>
            <div style="margin-right:20px;color:#888888">是否开启签到</div>
            <el-switch v-model="isSignIn"
                       @change="switchChange"
                       active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
        </el-container>
        <div class="table-body">
            <el-table :data="tableData"
                      border
                      stripe
                      size="medium"
                      style="width: 100%">
                <el-table-column prop="dayNum"
                                 label="签到天数"></el-table-column>
                <el-table-column prop="diamondNum"
                                 label="钻石数量">
                    <template slot-scope="scope">
                        <template>
                            <div v-show="!scope.row.disabled"
                                 v-text="scope.row.diamondNum"></div>
                            <el-form class="table-custom-item"
                                     v-show="scope.row.disabled">
                                <el-input type="text"
                                          v-model.number="scope.row.diamondNum"
                                          placeholder="请输入钻石数量"></el-input>
                                <el-button type="primary"
                                           @click="comfirmEdit(scope)"
                                           size="mini">确认</el-button>
                            </el-form>

                        </template>
                    </template>
                </el-table-column>
                <el-table-column fixed="right"
                                 label="操作">
                    <template slot-scope="scope">
                        <el-button @click="scope.row.disabled = true"
                                   size="mini">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isSignIn: false,
            tableData: []
        };
    },
    mounted() {
        this.initData()
    },
    methods: {
        switchChange() {
            let param = {
                status: this.isSignIn ? 1 : 0
            }
            this.$service.updateIsSignStatus(param)
                .then(res => {
                    if (res.code == '00000') {
                        this.initData()
                    }
                })
        },
        comfirmEdit(scope) {
            if (scope.row.diamondNum > 1000) {
                this.$message({
                    message: '钻石数目应小于1000'
                })
                return
            }
            let param = {
                id: scope.row.id,
                diamondNum: scope.row.diamondNum
            }
            this.$service.updateDiamond(param)
                .then(res => {
                    if (res.code == '00000') {
                        this.initData()
                    }
                })

        },
        initData() {
            this.$service.getSignInList()
                .then(res => {
                    let tempList = res.data || []
                    
                    let flag = false
                    tempList.forEach(item => {
                        item.disabled = false
                        flag = item.status == 0 ? false : true
                    })
                    this.tableData = tempList
                    this.isSignIn = flag
                   
                })
        }
    }
};
</script>

<style lang="scss">
.table-custom-item {
    widows: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .el-input {
        width: 30%;
        margin-right: 20px;
    }
}
</style>